<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增票据管理')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-bill-add">
            <input type="hidden" id="billUrl" name="billUrl">
            <div class="form-group">
                <label class="col-sm-3 control-label">上传票据：</label>
                <div class="col-sm-8">
                    <div id="drop_area"></div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">发票编号：</label>
                <div class="col-sm-8">
                    <input id="invoiceNum" name="invoiceNum" class="form-control" type="text"  required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">总计金额：</label>
                <div class="col-sm-8">
                    <input id="totalAmount" name="totalAmount" class="form-control"  type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">开票日期：</label>
                <div class="col-sm-8">
                    <input id="invoiceDate" name="invoiceDate" class="form-control"  type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">购买方：</label>
                <div class="col-sm-8">
                    <input id="purchaserName" name="purchaserName" class="form-control"  type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">销售方：</label>
                <div class="col-sm-8">
                    <input id="sellerName" name="sellerName" class="form-control"  type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">单位：</label>
                <div class="col-sm-8">
                    <input id="unit" name="unit" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">规格：</label>
                <div class="col-sm-8">
                    <input id="type" name="type" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">数量：</label>
                <div class="col-sm-8">
                    <input id="num" name="num" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">价格：</label>
                <div class="col-sm-8">
                    <input id="price" name="price" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">金额：</label>
                <div class="col-sm-8">
                    <input id="amount" name="amount" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">税率：</label>
                <div class="col-sm-8">
                    <input id="taxRate" name="taxRate" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">税额：</label>
                <div class="col-sm-8">
                    <input id="tax" name="tax" class="form-control"  type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control"></textarea>
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jqueryUpload-js" />

    <script th:inline="javascript">
        var prefix = ctx + "system/bill"
        $("#form-bill-add").validate({
            focusCleanup: true
        });

        var dragImgUpload = new DragImgUpload("#drop_area",{
            callback:function (files) {
                //回调函数，可以传递给后台等等
                var file = files[0];
                var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: ctx+'common/uploadBill',  // 替换成你的上传处理脚本
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        console.log(response)
                        if(response.code == 0){
                            $("#billUrl").val(response.fileName);
                            var vatInvoice = response.vatInvoice;
                            $("#invoiceNum").val(vatInvoice.invoiceNum);
                            $("#totalAmount").val(vatInvoice.totalAmount);
                            $("#invoiceDate").val(vatInvoice.invoiceDate);
                            $("#purchaserName").val(vatInvoice.purchaserName);
                            $("#sellerName").val(vatInvoice.sellerName);
                            $("#unit").val(vatInvoice.unit);
                            $("#type").val(vatInvoice.type);
                            $("#num").val(vatInvoice.num);
                            $("#price").val(vatInvoice.price);
                            $("#amount").val(vatInvoice.amount);
                            $("#taxRate").val(vatInvoice.taxRate);
                            $("#tax").val(vatInvoice.tax);
                        }else {
                            $.modal.msgSuccess("图片上传失败");
                        }
                        console.log('图片上传成功：', response);
                    },
                    error: function(){
                        $.modal.msgSuccess("图片上传失败");
                        console.log('图片上传失败');
                    }
                });
            }
        })
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-bill-add').serialize());
            }
        }
    </script>
</body>
</html>